import 'package:flutter/material.dart';
import 'package:flutter_zuyin/config/app_colors.dart';
import 'package:flutter_zuyin/view/index_pages/home_page.dart';
import 'package:flutter_zuyin/view/index_pages/profile_page.dart';

class IndexPage extends StatefulWidget {
  IndexPage({Key? key}) : super(key: key);

  @override
  _IndexPageState createState() => _IndexPageState();
}

const Map<String, String> _bottonNames = {
  "home": "首页",
  "create_media": "",
  "profile": "我的",
};

class _IndexPageState extends State<IndexPage> {
  //页面集合
  final List<Widget> _pageList = [HomePage(), Container(), ProfilePage()];
  int _curIndex = 0;
  //底部导航数组
  final List<BottomNavigationBarItem> _bottomNavBarList = [];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    //初始化底部导航列表
    _bottonNames.forEach((key, value) {
      _bottomNavBarList.add(_bottomNavBarItem(key, value));
    });
  }

  //底部切换
  void _onTapClick(int index) {
    if (index == 1) {
      return _create_meida();
    }
    setState(() {
      _curIndex = index;
    });
  }

  //点击发布按钮
  void _create_meida() {
    print("object");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pageList[_curIndex],
      bottomNavigationBar: BottomNavigationBar(
        items: _bottomNavBarList,
        currentIndex: _curIndex,
        onTap: _onTapClick,
        type: BottomNavigationBarType.fixed,
      ),
      floatingActionButton: _createMediaButton(),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }

  Widget _createMediaButton() {
    return Container(
      margin: EdgeInsets.only(top: 56),
      width: 44,
      height: 44,
      child: FloatingActionButton(
        backgroundColor: AppColors.nav,
        child: Image.asset(
          "assets/images/create_media.png",
        ),
        onPressed: _create_meida,
      ),
    );
  }

  BottomNavigationBarItem _bottomNavBarItem(String key, String value) {
    return BottomNavigationBarItem(
        icon: Image.asset(
          "assets/images/$key.png",
          width: 24,
          height: 24,
        ),
        activeIcon: Image.asset(
          "assets/images/${key}_active.png",
          width: 24,
          height: 24,
        ),
        label: value,
        tooltip: '');
  }
}
